<template>
    <div v-loading.fullscreen.lock="fullscreenLoading" element-loading-background="rgba(0, 0, 0, 0.4)"
        style="height:calc(100% - 80px)">
        <!-- <div v-if="LsccDlg" class="mask"></div> -->
        <div v-if="LsccDlg"></div>
        <div class="estabform">
            <el-form ref="ruleForm" label-width="auto" label-position="left" style="margin: 1px 0; overflow: hidden">
                <el-form-item label="方案名称" class="famc">
                    <el-input v-model="ruleForm.name" style="width:100%" />
                </el-form-item>
                <el-form-item label="预演类别" class="famc">
                    <el-radio-group v-model="ruleForm.yycategory" @change="yycategoryClick">
                        <el-radio label="1">预报预演</el-radio>
                        <el-radio label="2">历史复盘</el-radio>
                        <el-radio label="3">极端情景</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- 预报预演-----------------strat -->
                <div v-if="ruleForm.yycategory == 1">
                    <el-form-item label="预报类别" class="famc">
                        <el-radio-group v-model="ruleForm.ybcategory" @change="ybcategoryClick">
                            <el-radio label="2">短临预报</el-radio>
                            <el-radio label="6">6H预报</el-radio>
                            <el-radio label="12">12H预报</el-radio>
                            <el-radio label="24">24H预报</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="选择雨型" class="xzjywj famc ">
                        <el-select v-model="ruleForm.xzyxForm" style="width:100%" @change="xzyxHandelClick($event)">
                            <el-option v-for="(jdyxxz, index) in Jxzyx" :key="index" :label="jdyxxz.rpName"
                                :value="jdyxxz.rpID" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择降雨文件" class="xzjywj famc ">
                        <el-select v-model="ruleForm.rainfallfile" style="width:100%" @change="rainfallfileClick">
                            <el-option v-for="(rainItem, rainIndex) in rainfallfileList" :key="rainIndex"
                                :label="rainItem.weatherFile" :value="rainItem.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="降雨放大比例" class="xzjywj m-t-5 famc ">
                        <el-input-number v-model="ruleForm.lsccInput" :min="0" size="mini" :step="1"
                            @change="jyfdblChange1" />
                        <span> &nbsp;% </span>
                    </el-form-item>
                </div>
                <!-- 预报预演-----------------end -->
                <div v-if="ruleForm.yycategory == 2">
                    <el-form-item label="历史场次" class="marbom5">
                        <el-select v-model="ruleForm.liccName" style="width:70%" @change="lsccClick">
                            <el-option v-for="lsccItem in liccList" :key="lsccItem.id" :label="lsccItem.sitename"
                                :value="lsccItem.id" />
                        </el-select>
                        <span class="btnCjfa xzccBtn" @click="xzccBtnSpan">新增场次</span>
                    </el-form-item>
                    <el-form-item label="降雨放大比例" class="xzjywj ">
                        <el-input-number v-model="ruleForm.lsccInput" :min="0" size="mini" :step="1"
                            @change="jyfdblChange" />
                        <span> &nbsp;% </span>
                        <span class="btnCjfa xzccBtn" @click="showRainMap">显示雨情</span>
                    </el-form-item>
                </div>
                <div v-if="ruleForm.yycategory == 3">
                    <el-form-item label="选择雨型">
                        <el-select v-model="ruleForm.xzyxForm" style="width:100%" @change="xzyxHandelClick($event)">
                            <el-option v-for="jdyxxz in Jxzyx" :key="jdyxxz.rpID" :label="jdyxxz.rpName"
                                :value="jdyxxz.rpID" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="降雨时段" style="margin:5px 0">
                        <el-select v-model="ruleForm.jysdJdqj" style="width:100%" @change="jysdHandelClick($event)">
                            <el-option label="1h" value="1" />
                            <el-option label="3h" value="3" />
                            <el-option label="6h" value="6" />
                            <el-option label="12h" value="12" />
                            <el-option label="24h" value="24" />
                        </el-select>
                    </el-form-item>
                    <el-form-item class="tabJYlDiv marbom5 famc">
                        <el-radio-group v-model="ruleForm.JylJypl" @change="tabJylJypl">
                            <el-radio label="1">降雨量</el-radio>
                            <el-radio label="2">降雨频率</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item v-if="ruleForm.JylJypl == 1" label="降雨量">
                        <el-input v-model="ruleForm.rainfall" placeholder="输入降雨量" style="width:100%"
                            @input="ruleForm.rainfall = ruleForm.rainfall.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3').replace(/^\./g, '')"
                            @blur="rainFallBlur($event)" />
                    </el-form-item>
                    <!-- <el-form-item v-if="ruleForm.JylJypl == 2" label="降雨频率">
                        <el-select v-model="ruleForm.rcint" style="width:100%" @change="rcintClick($event)">
                            <el-option v-for="item in ruleForm.RainDesign" :key="item.DRP" :label="item.NAME"
                                :value="item.DRP" />
                        </el-select>
                    </el-form-item> -->
                    <el-form-item v-if="ruleForm.JylJypl == 2" label="降雨频率">
                        <el-select v-model="ruleForm.rcint" style="width:100%" @change="rcintClick($event)">
                            <el-option v-for="item in ruleForm.RainDesign" :key="item.drp" :label="item.name"
                                :value="item.drp" />
                        </el-select>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="TimeOfRianTitle" @click="Statistvics_top">
            <div>降雨时刻分布图</div>
            <div>
                <img v-if="!this.chartsShow" src="@/assets/newimg/arrowsDown.png">
                <img class="closeTransIcon" v-if="this.chartsShow" src="@/assets/newimg/arrowsDown.png">
            </div>
        </div>
        <div v-if="chartsShow" v-loading="loadingCharts" element-loading-background="rgba(0, 0, 0, 0.4)" style="width:100%;"
            class="echartsBox" :class="ruleForm.yycategory == 1 ? 'ybechartsBox' : ''">
            <!-- class="echartsBox ybechartsBox" > -->
            <div class="exchartsList">
                <Newecharts v-if="ruleForm.yycategory == 1 || ruleForm.yycategory == 3" id="establistEchart"
                    :option="establistEchartDat" :style="{ width: '100%', height: '100%' }" />
                <Newecharts v-if="ruleForm.yycategory == 2" id="lishiCharts" :option="lishiCharts"
                    :style="{ width: '100%', height: '100%' }" />
            </div>
        </div>
        <el-form ref="ruleForm" label-width="auto" label-position="left" style="margin: 5px 0; overflow: hidden">
            <el-form-item label="隐患类别" class="famc">
                <!-- <el-form-item label="隐患类别" class="yhRlfoem famc"> -->
                <el-radio-group v-model="ruleForm.yhlbRadio" @change="yhlbRadioClick">
                    <el-radio label="1">无隐患</el-radio>
                    <el-radio label="2">预设隐患</el-radio>
                    <el-radio label="3">自定义隐患</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="showYhfaSelect" label="选择隐患方案" class="xzjywj famc">
                <el-select v-model="ruleForm.yhfaName" style="width:100%" @change="yhlselectClick">
                    <el-option v-for="item in yhfaSelectData" :key="item.id" :label="item.hiddenDangerName"
                        :value="item.id" />
                </el-select>
            </el-form-item>
        </el-form>
        <div :class="{
            'tableEstablishOne': ruleForm.yycategory == 1 && (ruleForm.yhlbRadio == '3' || ruleForm.yhlbRadio == '1') && chartsShow,
            'tableEstablishOneCenter': ruleForm.yycategory == 1 && (ruleForm.yhlbRadio == '2') && chartsShow,
            'tableEstablishTwo': ruleForm.yycategory == 2 && (ruleForm.yhlbRadio == '3' || ruleForm.yhlbRadio == '1') && chartsShow,
            'tableEstablishTwoCenter': ruleForm.yycategory == 2 && (ruleForm.yhlbRadio == '2') && chartsShow,
            'tableEstablishThree': ruleForm.yycategory == 3 && (ruleForm.yhlbRadio == '3' || ruleForm.yhlbRadio == '1') && chartsShow,
            'tableEstablishThreeCenter': ruleForm.yycategory == 3 && (ruleForm.yhlbRadio == '2') && chartsShow,

            'tableEstablish1': ruleForm.yycategory == 1 && (ruleForm.yhlbRadio == '3' || ruleForm.yhlbRadio == '1') && !chartsShow,
            'tableEstablish1Center': ruleForm.yycategory == 1 && (ruleForm.yhlbRadio == '2') && !chartsShow,
            'tableEstablish2': ruleForm.yycategory == 2 && (ruleForm.yhlbRadio == '3' || ruleForm.yhlbRadio == '1') && !chartsShow,
            'tableEstablish2Center': ruleForm.yycategory == 2 && (ruleForm.yhlbRadio == '2') && !chartsShow,
            'tableEstablish3': ruleForm.yycategory == 3 && (ruleForm.yhlbRadio == '3' || ruleForm.yhlbRadio == '1') && !chartsShow,
            'tableEstablish3Center': ruleForm.yycategory == 3 && (ruleForm.yhlbRadio == '2') && !chartsShow,
        }">
            <div class="listTables"
                :class="{ 'wudutable1': ruleForm.yhlbRadio == '3' || ruleForm.yhlbRadio == '1', 'wudutable': ruleForm.yhlbRadio == '2' }">

                <!-- <el-table :data="yhlbtableData" fit style="width: 100%; margin-bottom:4px; border-bottom:1px solid #3F72AA;" height="146px" @row-click="yhlbRowClick">
                    <template slot="empty">
                        //<span>无隐患设置/无堵水</span>
                        <img src="@/assets/dialog/NoDataicon.png" alt="">
                    </template>
                    <el-table-column prop="name" align="center" label="隐患点">
                        <template slot-scope="scope">
                            <div> {{ scope.row.name }} - 桥梁</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="dstype" align="center" width="120" label="隐患设置">
                        <template slot-scope="scope">
                            {{ scope.row.dstype == 1 ? '全堵' : '半堵' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" width="120" align="center" label="堵水时段">
                        <template slot-scope="scope">
                            <span> {{ scope.row.hiddenbegin | dateformat }}</span><br>
                            <span> {{ scope.row.hiddenend | dateformat }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="ruleForm.yhlbRadio == '3'" prop="name" width="80" align="center" label="操作">
                        <template slot-scope="scope">
                            // <span @click.stop="handleEditClick(scope.row)">编辑</span><br> 
                            <span @click.stop="handleDelClick(scope.row)">删除</span>
                        </template>
                    </el-table-column>
                </el-table> -->
                <!-- 表格 -->
                <div class="tabel_common tabel_commons">
                    <div class="table">
                        <div class="thead">
                            <div class="tr">
                                <div class="th"> 隐患点 </div>
                                <div class="th"> 隐患设置 </div>
                                <div class="th"> 堵水时段 </div>
                                <div class="th" v-if="ruleForm.yhlbRadio == '3'"> 操作 </div>
                            </div>
                        </div>
                        <el-scrollbar style="width: 100%;" class="el_scrollbar" :class="{
                            'el_scrollbarOpen': ruleForm.yycategory == 1 && (ruleForm.yhlbRadio == '3' || ruleForm.yhlbRadio == '1') && chartsShow,
                            'el_scrollbarOpenCenter': ruleForm.yycategory == 1 && (ruleForm.yhlbRadio == '2') && chartsShow,
                            'el_scrollbarClose': ruleForm.yycategory == 1 && (ruleForm.yhlbRadio == '3' || ruleForm.yhlbRadio == '1') && !chartsShow,
                            'el_scrollbarCloseCenter': ruleForm.yycategory == 1 && (ruleForm.yhlbRadio == '2') && !chartsShow,
                            'el_scrollbar2Open': ruleForm.yycategory == 2 && (ruleForm.yhlbRadio == '3' || ruleForm.yhlbRadio == '1') && chartsShow,
                            'el_scrollbar2OpenCenter': ruleForm.yycategory == 2 && (ruleForm.yhlbRadio == '2') && chartsShow,
                            'el_scrollbar2Close': ruleForm.yycategory == 2 && (ruleForm.yhlbRadio == '3' || ruleForm.yhlbRadio == '1') && !chartsShow,
                            'el_scrollbar2CloseCenter': ruleForm.yycategory == 2 && (ruleForm.yhlbRadio == '2') && !chartsShow,
                            'el_scrollbar3Open': ruleForm.yycategory == 3 && (ruleForm.yhlbRadio == '3' || ruleForm.yhlbRadio == '1') && chartsShow,
                            'el_scrollbar3OpenCenter': ruleForm.yycategory == 3 && (ruleForm.yhlbRadio == '2') && chartsShow,
                            'el_scrollbar3Close': ruleForm.yycategory == 3 && (ruleForm.yhlbRadio == '3' || ruleForm.yhlbRadio == '1') && !chartsShow,
                            'el_scrollbar3CloseCenter': ruleForm.yycategory == 3 && (ruleForm.yhlbRadio == '2') && !chartsShow,

                        }">
                            <div class="tbody">
                                <template v-if="yhlbtableData.length <= 0">
                                    <div slot="no-results" class="noData" :class="{
                                        'noDataOpen': ruleForm.yycategory == 1 && (ruleForm.yhlbRadio == '3' || ruleForm.yhlbRadio == '1') && chartsShow,
                                        'noDataCenter': ruleForm.yycategory == 1 && (ruleForm.yhlbRadio == '2') && chartsShow,
                                        'noDataCenterClose': ruleForm.yycategory == 1 && (ruleForm.yhlbRadio == '2') && !chartsShow,
                                        'noData2Open': ruleForm.yycategory == 2 && (ruleForm.yhlbRadio == '3' || ruleForm.yhlbRadio == '1') && chartsShow,
                                        'noData2Center': ruleForm.yycategory == 2 && (ruleForm.yhlbRadio == '2') && chartsShow,
                                        'noData2Close': ruleForm.yycategory == 2 && (ruleForm.yhlbRadio == '3' || ruleForm.yhlbRadio == '1') && !chartsShow,
                                        'noData2CenterClose': ruleForm.yycategory == 2 && (ruleForm.yhlbRadio == '2') && !chartsShow,
                                        'noData3Open': ruleForm.yycategory == 3 && (ruleForm.yhlbRadio == '3' || ruleForm.yhlbRadio == '1') && chartsShow,
                                        'noData3Center': ruleForm.yycategory == 3 && (ruleForm.yhlbRadio == '2') && chartsShow,
                                    }">暂无数据</div>
                                </template>
                                <div v-if="yhlbtableData && yhlbtableData.length > 0" class="tr"
                                    v-for="(dict, index ) in yhlbtableData" :key="index" @click="yhlbRowClick(dict)"
                                    :class="['tr', PointId == dict.pointsid ? 'ta' : '']">
                                    <div class="td"> {{ dict.name }} - 桥梁</div>
                                    <div class="td"> {{ dict.dstype == 1 ? '全堵' : '半堵' }} </div>
                                    <div class="td"> {{ dict.hiddenbegin | dateformat }} <br /> {{ dict.hiddenend |
                                        dateformat }} </div>
                                    <!-- <div class="td" v-if="ruleForm.yhlbRadio == '3'" @click.stop="handleDelClick(dict)"> 删除 -->
                                    <div class="td" v-if="ruleForm.yhlbRadio == '3'" @click.stop="openTipDialog(dict)"> 删除
                                    </div>
                                </div>
                            </div>
                        </el-scrollbar>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部按钮 -->
        <div class="btm_faxq2">
            <!--<span class="btnCjfa" @click="cancelRehearsal">取消</span> 
            <span class="btnCjfa" @click="submitCreateRehearsal">确定</span> -->
            <span class="btnCjfa" @click="cancelRehearsal"> <img src="@/assets/dialog/DialogCancelBtn.png"> </span>
            <span class="btnCjfa" @click="submitCreateRehearsal"> <img src="@/assets/dialog/DialogSubmitBtn.png"> </span>
        </div>

        <div v-show="LsccDlg" class="layerLscc ">
            <div class="layerLsccName ">
                新增场次
                <i class="el-icon-error" @click="cancelLscc" />
            </div>
            <div>
                <el-form ref="lsccFormRule" :model="lsccFormRule" label-width="60px" label-position="left"
                    class="lsccLayerForm">
                    <el-form-item label="场次名称" prop="sitename">
                        <el-input v-model="lsccFormRule.sitename" placeholder="场次名称" style="width:100%" />
                    </el-form-item>
                    <el-form-item label="降雨开始" prop="sitebegin">
                        <el-date-picker v-model="lsccFormRule.sitebegin" type="datetime" placeholder="开始时间"
                            format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" default-time="12:00:00" />
                    </el-form-item>
                    <el-form-item label="降雨结束" prop="siteend">
                        <el-date-picker v-model="lsccFormRule.siteend" type="datetime" placeholder="结束时间"
                            format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" default-time="12:00:00" />
                    </el-form-item>
                </el-form>
                <!-- <div class="btnLsccDiv"> -->
                <div class="pop-row">
                    <span class="hdbtn" @click="determineLscc">确&nbsp; &nbsp; 定</span>
                    <span class="hdbtn" @click="cancelLscc">取&nbsp; &nbsp; 消</span>
                </div>
            </div>
        </div>

        <!-- 删除提示框 -->
        <DlgdivTip v-if="tipDialogShow" ref="deleteTipDialog" :ismask="true">
            <template v-slot:title> 删除提示 </template>
            <template v-slot:body>
              <div class="body-inner">
                <p class="contant">确定要删除该自定义隐患吗？</p>
              </div>
            </template>
            <template v-slot:footer>
              <div class="btn-row">
                <div class="btn" @click="cancelTipDialog">
                  <img src="@/assets/dialog/tipCancel.png" alt="">
                </div>
                <div class="btn" @click="confirmTipDialog">
                  <img src="@/assets/dialog/tipSubmit.png" alt="">
                </div>
              </div>
            </template>
          </DlgdivTip>
    </div>
</template>
<script>
import { initLoad, callUIInteraction, addResponseEventListener } from '@/PixelStreaming/webrtcVideo.js'
import {
    GetForcastFileList,
    GetWswcdAreLP,
    GetPHDList,
    GetPHDDetailList,
    GetRSiteList,
    CreateRSite,
    GetWsWscdPByStcdP,
    GetRPList,
    GetWswscdPByP,
    CreateRehearsal,
    GetRainDesign
} from '@/api/xuna.js'
import Newecharts from '@/views/components/newecharts.vue'
import moment from 'moment'
import * as echarts from 'echarts'
export default {
    components: {
        Newecharts
    },
    props: ['filewswscd', 'showCompont'],
    data() {
        return {
            tipDialogShow: false, //删除提示弹窗
            yhId:undefined, //隐患id
            dataIsValid: false,
            PointId: undefined,
            fullscreenLoading: false,
            loadingCharts: false,
            wswscd: this.filewswscd,
            ruleForm: {
                name: '', // 方案名称
                yycategory: '1', // 预演类别
                rainfallfile: '', // 选择降雨文件
                ybcategory: '6',
                yhlbRadio: '1', // 隐患类别
                yhfaName: '', // 选中的隐患方案
                lsccInput: '100',
                liccName: '', // 历史场次选中,
                liccNameid: '', // 场次id
                xzyxForm: '', // 雨型选择
                jysdJdqj: '1',
                rainfall: '0', // 降雨量,
                JylJypl: '2',
                rcint: '',
                RainDesign: []
            },
            lsccFormRule: {
                sitename: '',
                sitebegin: '',
                siteend: ''
            },
            rainfallfileList: [], // 降雨文件类型列表
            establistEchartDat: {}, // 图表数据
            yhlbtableData: [], // 隐患列表
            yhfaSelectData: [],
            showYhfaSelect: false, // 是否显示选择隐患方案下拉框
            liccList: [],
            LsccDlg: false,
            lishichartsList: [],
            lishiCharts: {}, // 历史图表
            Jxzyx: [],
            chartsShow: true,
            chartsShow1: true,
            noodlesModel: [],
            longtimeId: '',
            rainTypeId: '',
            fileidId: '',
            POINTSID: 0,
            sitebegin: '', // 显示雨情所用参数
            siteend: '', // 显示雨情所用参数
            showRian: false, // 是否显示了雨情
            jyplRain: 0,
            ybyyechartsdata: []
        }
    },
    computed: {
        // 流域编码
        basin() {
            return this.$store.getters.basin
        },
    },
    watch: {
        filewswscd(newvalue) {
            this.wswscd = newvalue
        }
    },
    beforeDestroy() {
        this.$eventBus.$emit('EB_YB_SCJY', false)
        this.$eventBus.$emit('EB_YY_YJ_LJ', false)
    },
    created() {
        this.getGetForcastFileList()
        this.$eventBus.$on('HDDlgFormSubmit', (dhConfig) => {
            this.yhlbtableData.push(dhConfig)
        })

        this.getGetRPList()
    },
    methods: {
        // 预演类别切换
        yycategoryClick(val) {
            this.ruleForm.yycategory = val
            this.ruleForm.xzyxForm = ''
            this.ruleForm.lsccInput = '100'
            if (val === '1') { // 预报预案
                this.closeRian()
                this.getGetForcastFileList()
                this.ruleForm.xzyxForm = this.Jxzyx.length ? this.Jxzyx[0].rpID : ''
                // 选择雨形
                // this.getGetRPList();
            } else if (val === '2') {
                this.getGetRSiteList()
            } else {
                this.closeRian()
                this.ruleForm.xzyxForm = this.Jxzyx.length ? this.Jxzyx[0].rpID : ''
                // this.getGetRPList()
                this.establistEchartDat = {}
                this.getGetRainDesign()
            }
            this.echarresize()
        },
        // 隐患类别切换事件
        yhlbRadioClick(val) {
            if (val === '1') {
                this.$eventBus.$emit('HDState', {
                    action: '无隐患',
                    data: null
                })
                this.showYhfaSelect = false
                this.yhlbtableData = []
                this.POINTSID = 0
                var param = {
                    "basin": this.basin,
                    "type": 1,
                }
                callUIInteraction("Web_yhlbRadioClick", param);
            } else if (val === '2') {
                this.yhlbtableData = []
                this.showYhfaSelect = true
                this.getGetPHDList()
            } else {
                this.POINTSID = 0
                this.yhlbtableData = []
                this.showYhfaSelect = false
                this.$eventBus.$emit('HDState', {
                    action: '自定义隐患',
                    data: null
                })
                var param = {
                    "basin": this.basin,
                    "type": 3,
                }
                callUIInteraction("Web_yhlbRadioClick", param);
            }

        },
        // 获取降雨文件
        getGetForcastFileList() {
            const fileparmas = {

                step: this.ruleForm.ybcategory
            }
            this.rainfallfileList = []
            this.ruleForm.rainfallfile = null
            this.fileidId = ''
            this.getestablistEchart([])
            GetForcastFileList(fileparmas).then((res) => {
                if (res.isSuccess && res.data.length > 0) {
                    this.rainfallfileList = res.data
                    this.ruleForm.rainfallfile = res.data[0].id
                    this.fileidId = res.data[0].id
                    this.getGetWswcdAreLP(res.data[0].rainStart)
                } else {

                }
            })
        },
        // 筛选预报类别 获取降雨文件
        ybcategoryClick(val) {
            this.ruleForm.ybcategory = val
            this.getGetForcastFileList()
        },
        // 选择下拉降雨文件
        rainfallfileClick(val) {
            this.fileidId = val
            this.getGetWswcdAreLP()
        },

        // 预报预演获取降雨图表
        getGetWswcdAreLP(dtTime) {
            let ar = []
            ar = this.rainfallfileList.filter(item => {
                return item.id == this.fileidId
            })
            const dtTimes = ar.length ? ar[0].rainStart : dtTime
            const TbParmas = {
                dtTime: dtTimes,
                wswscd: this.wswscd,
                rpid: this.ruleForm.xzyxForm,
                step: this.ruleForm.ybcategory
            }
            this.$eventBus.$emit('HDDefaultTime', {
                dtBeginHD: dtTimes,
                dtEndHD: this.$moment(dtTime).add('hour', this.ruleForm.ybcategory).format('YYYY-MM-DD HH:mm')
            })
            this.loadingCharts = true
            GetWswcdAreLP(TbParmas).then((res) => {
                if (res.isSuccess) {
                    this.ybyyechartsdata = res.data
                    this.getestablistEchart(res.data, this.ruleForm.lsccInput)
                }
                this.loadingCharts = false
            }).catch(err => {
                this.loadingCharts = false
            })
        },
        // 预报预演放大比例事件
        jyfdblChange1(val) {
            // 检查是否为小数
            if (val % 1 !== 0) {
                // 如果是小数，转换为正整数
                val = Math.ceil(val);
                // 更新输入框的值
                this.ruleForm.lsccInput = val;
            }
            this.getestablistEchart(this.ybyyechartsdata, val)
        },
        // 预报预演/极端情景页面的图表
        getestablistEchart(dataEchart, num) {
            //  this.noodlesModel = dataEchart
            const jyData = []
            const xData = []
            const jylData = []
            // dataEchart.map((v) => {
            //     jyData.push(Number(v.arealP))
            //     xData.push(moment(v.dTime).format('YYYY-MM-DD HH:mm'))
            // })
            //  预报预演增加  降雨放大比例
            let numsflg = true
            if (num - 100 < 0) {
                numsflg = false
            } else {
                numsflg = true
            }
            const nooddata = dataEchart.map(function (v, i) {
                return {
                    wswscd: v.wswscd,
                    dTime: v.dTime,
                    arealP: v.arealP,
                    RehearsalP: (v.arealP * num / 100)
                }
            })
            this.noodlesModel = nooddata
            nooddata.map(function (v, i) {
                xData.push(moment(v.dTime).format('YYYY-MM-DD HH:mm'))
                jyData.push(Number(v.arealP))
                jylData.push(Number(v.RehearsalP).toFixed(2))
            })
            let maxwid = ''
            let seriedat = []

            if (this.ruleForm.yycategory == 3) {
                if (this.ruleForm.jysdJdqj == '1') {
                    maxwid = '20%'
                } else if (this.ruleForm.jysdJdqj == '3') {
                    maxwid = '60%'
                }
                seriedat = [{
                    name: '雨量',
                    color: '#009bd5',
                    type: 'bar',
                    barGap: '0%', // 柱间距离，默认为柱形宽度的30%，可设固定值
                    barCategoryGap: '2%',
                    barMaxWidth: maxwid,
                    itemStyle: {
                        // color: '#3abbfe' // 柱条颜色
                        // borderColor: '#3abbfe' // 柱条描边颜色
                        normal: {
                            // 渐变了
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#00E4FF' },
                                { offset: 1, color: '#0039BB' }
                            ])
                        }
                    },
                    data: jyData
                }]
            } else if (this.ruleForm.yycategory == 1) {
                seriedat = [{
                    name: '实测雨量',
                    color: '#009bd5',
                    type: 'bar',
                    // barGap: '0%', // 柱间距离，默认为柱形宽度的30%，可设固定值
                    z: numsflg ? '2' : '1',
                    // barGap: "-100%",
                    barCategoryGap: '2%',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + 'mm'
                        }
                    },
                    itemStyle: {
                        color: '#3abbfe' // 柱条颜色

                    },
                    data: jyData
                }, {
                    name: '放大雨量',
                    color: '#009bd5',
                    type: 'bar',
                    // barGap: '0%', // 柱间距离，默认为柱形宽度的30%，可设固定值
                    barGap: '-100%',
                    z: numsflg ? '1' : '3',
                    barCategoryGap: '2%',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + 'mm'
                        }
                    },
                    itemStyle: {
                        color: '#FFA91A' // 柱条颜色
                        // borderColor: '#3abbfe' // 柱条描边颜色
                    },
                    data: jylData
                }]
            }

            this.establistEchartDat = {
                tooltip: {
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    borderColor: '#333',
                    trigger: 'axis',
                    triggerOn: 'mousemove',
                    confine: true,
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    },
                    textStyle: {
                        color: '#fff'
                    }
                    // formatter: function(params, i) {
                    //     const str = xData[params[0].dataIndex] + '<br />' + '<span style="color:#009bd5">●</span>' + params[0].seriesName + '<span style="margin-right:10px"></span>' + '<b> ' + params[0].data + 'mm'
                    //     return str
                    // }
                },
                legend: {
                    //  data: ['雨量'],
                    itemHeight: 8,
                    itemWidth: 12,
                    textStyle: {
                        fontSize: 12,
                        color: '#fff'
                    },
                    x: 'right'
                },
                grid: {
                    x: 40,
                    y: 35,
                    x2: 25,
                    y2: 35
                },
                xAxis: [{
                    type: 'category',
                    data: xData.map(function (v) {
                        return moment(v).format('HH:mm')
                    }),
                    axisPointer: {
                        type: 'shadow',
                        interval: xData.length > 6 ? 1 : 0,
                        color: '#fff'

                    },
                    axisLabel: {
                        textStyle: {
                            fontSize: 10,
                            color: '#fff'
                        }
                    }
                }],
                yAxis: [{
                    type: 'value',
                    name: '雨量(mm)',
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#0E5185'
                        }
                    },
                    nameTextStyle: {
                        color: '#fff',
                        fontSize: 12
                    },
                    axisLabel: {
                        formatter: '{value}',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    labels: {
                        align: 'left',
                        x: -8,
                        y: 5,
                        style: {
                            color: '#fff'
                        }
                    },
                    splitLine: {
                        show: true, // 去掉网格线
                        lineStyle: {
                            color: ['#99999959'],
                            width: 1,
                            type: 'dashed'
                        }
                    }

                }],
                series: seriedat
            }
        },
        // 预报隐患方案获取
        getGetPHDList() {
            GetPHDList().then((res) => {
                this.yhfaSelectData = res.data
                this.ruleForm.yhfaName = res.data[0].id
                this.getGetPHDDetailList(res.data[0].id)
                this.POINTSID = res.data[0].id
                var param = {
                    "basin": this.basin,
                    "type": 2,
                    "id": this.ruleForm.yhfaName
                }
                console.log(param)
                callUIInteraction("Web_yhlbRadioClick", param);
            })
        },
        handleEditClick(row) {
            console.log(row)
            console.log(this.$store.getters)
        },
        handleDelClick(row) {
            this.$confirm('删除此隐患点?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const itemId = row.id // 要删除的数据项的 id
                const index = this.yhlbtableData.findIndex(item => item.id === itemId) // 查找匹配的数据项索引
                if (index !== -1) {
                    this.yhlbtableData.splice(index, 1) // 从数组中删除匹配的数据项
                    this.$eventBus.$emit('HDState', {
                        action: '删除以创建',
                        id: row.id
                    })
                    this.$message.success('删除成功') // 可以根据需要进行提示
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
         // 删除提示操作
    // 打开
    openTipDialog(item) {
      this.yhId = item.id
      this.tipDialogShow = true
    },
    // 确认删除隐患
    confirmTipDialog() {
        // 要删除的数据项的 id  this.yhId
        const index = this.yhlbtableData.findIndex(item => item.id === this.yhId) // 查找匹配的数据项索引
        if (index !== -1) {
            this.yhlbtableData.splice(index, 1) // 从数组中删除匹配的数据项
            this.$eventBus.$emit('HDState', {
                action: '删除以创建',
                id: this.yhId
            })
            this.$message.success('删除成功') // 可以根据需要进行提示
        }
      this.tipDialogShow = false
    },
    // 取消删除方案
    cancelTipDialog() {
      this.$message({
        type: 'info',
        message: '已取消删除'
      })
      this.tipDialogShow = false
    },

    // 关闭删除提示弹窗
    closeTipDialog() {
      this.tipDialogShow = false
    },

        // end
        // 隐患下拉事件
        yhlselectClick(val) {
            this.POINTSID = val
            this.getGetPHDDetailList(val)
        },
        // 根据隐患方案获取列表
        getGetPHDDetailList(id) {
            GetPHDDetailList({
                ID: id
            }).then((res) => {
                this.yhlbtableData = res.data
                this.$eventBus.$emit('HDState', {
                    action: '隐患方案',
                    list: res.data
                })
            })
        },
        yhlbRowClick(e) {
            this.PointId = e.pointsid
            this.$eventBus.$emit('HDState', {
                action: '隐患行选择',
                id: e.pointsid
            })
            var param = {
                "basin": this.basin,
                "id": e.pointsid
            }
            console.log(param)
            callUIInteraction("Web_yhlbRowClick", param);
        },
        // 获取历史场次
        getGetRSiteList() {
            GetRSiteList({
                wswscd: this.wswscd
            }).then((res) => {
                if (res.data.length > 0) {
                    this.liccList = res.data
                    console.log('历史场次', this.liccList);

                    this.ruleForm.liccName = res.data[0].sitename
                    this.ruleForm.liccNameid = res.data[0].id
                    // 保存显示雨情所用的时间参数
                    this.sitebegin = res.data[0].sitebegin
                    this.siteend = res.data[0].siteend

                    this.getGetWsWscdPByStcdP({
                        sitebegin: res.data[0].sitebegin,
                        siteend: res.data[0].siteend
                    })
                }
            })
        },
        // 新增场次
        xzccBtnSpan() {
            this.LsccDlg = true
        },
        // 比较时间早晚
        compareDate(d1, d2) {
            return ((new Date(d1.replace(/\-/g, "\/"))) > (new Date(d2.replace(/\-/g, "\/"))));
        },
        determineLscc() {
            if (this.lsccFormRule.sitename === '') {
                this.$message({
                    message: '场次名称不能为空！',
                    type: 'warning'
                })
                return false
            }
            const lsccParams = {
                sitename: this.lsccFormRule.sitename,
                sitebegin: this.lsccFormRule.sitebegin,
                siteend: this.lsccFormRule.siteend,
                wswscd: this.wswscd
            }
            this.dataIsValid = this.compareDate(lsccParams.sitebegin, lsccParams.siteend,)
            // console.log('开始晚于结束吗',this.dataIsValid);
            if (this.dataIsValid) {
                this.$message({
                    message: '结束时间不可早于开始时间',
                    type: 'warning'
                })
                return false
            }
            this.fullscreenLoading = true
            CreateRSite(lsccParams).then((res) => {
                if (res.isSuccess) {
                    this.$message({
                        message: '新增场次成功！',
                        type: 'success'
                    })
                    this.getGetRSiteList()
                    this.$refs['lsccFormRule'].resetFields()
                    this.fullscreenLoading = false
                    this.LsccDlg = false
                }
            })
        },
        // 取消新增场次
        cancelLscc() {
            this.$refs['lsccFormRule'].resetFields()
            this.LsccDlg = false
        },

        // 筛选历史场次
        lsccClick(val) {
            var liccitem = {}
            this.liccList.map((item) => {
                if (item.id === val) {
                    liccitem = item
                }
            })
            this.ruleForm.liccName = liccitem.sitename
            this.ruleForm.liccNameid = liccitem.id
            // 保存显示雨情所用的时间参数
            this.sitebegin = liccitem.sitebegin
            this.siteend = liccitem.siteend
            this.getGetWsWscdPByStcdP(liccitem)
            if (this.showRain) {
                this.closeRian()
                this.showRainMap()
            }
        },
        // 历史复盘获取图表接口
        getGetWsWscdPByStcdP(e) {
            this.loadingCharts = true
            const WsWscdParams = {
                wswscd: this.wswscd,
                dtBegin: e.sitebegin,
                dtEnd: e.siteend
            }
            this.$eventBus.$emit('HDDefaultTime', { dtBeginHD: e.sitebegin, dtEndHD: e.siteend })
            GetWsWscdPByStcdP(WsWscdParams).then((res) => {
                if (res.isSuccess) {
                    this.lishichartsList = res.data
                    this.getLishicharts(res.data, this.ruleForm.lsccInput)
                    this.loadingCharts = false
                }
            })
        },

        // 放大比例事件
        jyfdblChange(val) {
            // 检查是否为小数
            if (val % 1 !== 0) {
                // 如果是小数，转换为正整数
                val = Math.ceil(val);
                // 更新输入框的值
                this.ruleForm.lsccInput = val;
            }
            this.getLishicharts(this.lishichartsList, val)
        },
        // 根据数据渲染历史图表
        getLishicharts(data, num) {
            const xliData = []
            const mylData = []
            const yymylData = []
            let numsflg = true
            if (num - 100 < 0) {
                numsflg = false
            } else {
                numsflg = true
            }
            const nooddata = data.map(function (v, i) {
                return {
                    wswscd: v.wswscd,
                    dTime: v.dTime,
                    arealP: v.arealP,
                    RehearsalP: (v.arealP * num / 100)
                }
            })
            this.noodlesModel = nooddata
            nooddata.map(function (v, i) {
                xliData.push(moment(v.dTime).format('YYYY-MM-DD HH:mm'))
                mylData.push(Number(v.arealP))
                yymylData.push(Number(v.RehearsalP).toFixed(2))
            })
            // console.log(mylData)
            // console.log(yymylDatas)
            this.lishiCharts = {
                tooltip: {
                    backgroundColor: 'rgba(2, 0, 31,0.65)',
                    borderColor: '#333',
                    trigger: 'axis',
                    triggerOn: 'mousemove',
                    confine: true,
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    },
                    textStyle: {
                        color: '#fff'
                    }
                },
                grid: {
                    x: 40,
                    y: 35,
                    x2: 25,
                    y2: 25
                },
                legend: {
                    // data: ['流域面雨量'],
                    //  data: ['实测面雨量','流域面雨量'],
                    itemHeight: 8,
                    itemWidth: 12,
                    textStyle: {
                        fontSize: 12,
                        color: '#fff'
                    },
                    x: 'right',
                    y: 'top'
                },
                xAxis: [{
                    type: 'category',
                    data: xliData.map(function (v, i) {
                        if (i === 0) {
                            return moment(xliData[i]).format('YYYY-MM-DD')
                        } else {
                            return moment(xliData[i]).format('MM月DD日 HH:mm')
                        }
                    }),
                    interval: 5,
                    axisPointer: {
                        type: 'shadow',
                        interval: 3,
                        color: '#fff'

                    },
                    axisLabel: {
                        textStyle: {
                            fontSize: 10,
                            color: '#fff'
                        }
                    }
                }],
                yAxis: [
                    // {
                    //     type: 'value',
                    //     name: '实测面雨量',
                    //     min: Math.min(...mylData),
                    //     max: Math.max(...yymylData),
                    //     interval: 50,
                    //     axisLine: {
                    //         show: false
                    //     },
                    //     splitLine: {
                    //         lineStyle: {
                    //             color: '#0E5185'
                    //         }
                    //     },
                    //     nameTextStyle: {
                    //         color: '#fff',
                    //         fontSize: 12,
                    //         padding: [0, 30, 0, 0]

                    //     },
                    //     axisLabel: {
                    //         formatter: '{value}',
                    //         textStyle: {
                    //             color: '#fff'
                    //         }
                    //     }
                    // }
                    {
                        type: 'value',
                        name: '流域面雨量',
                        min: numsflg ? Math.min(...yymylData) : Math.min(...mylData),
                        max: numsflg ? Math.max(...yymylData) : Math.max(...mylData),
                        axisLine: {
                            show: false
                        },
                        nameTextStyle: {
                            color: '#fff',
                            fontSize: 12,
                            padding: [0, 0, 0, 10]
                        },
                        splitLine: {
                            lineStyle: {
                                color: ['rgba(148, 193, 248, 0.14)']
                            }
                        },
                        axisLabel: {
                            formatter: '{value}',
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        labels: {
                            align: 'left',
                            x: -8,
                            y: 5,
                            style: {
                                color: '#fff'
                            }
                        },
                        splitLine: {
                            show: true, // 去掉网格线
                            lineStyle: {
                                color: ['#99999959'],
                                width: 1,
                                type: 'dashed'
                            }
                        }
                    }
                ],
                series: [
                    // {
                    //     name: '实测面雨量',
                    //     type: 'bar',
                    //     barGap: '0%',
                    //     tooltip: {
                    //         valueFormatter: function(value) {
                    //             return value + 'mm'
                    //         }
                    //     },
                    //     data: mylData
                    // },

                    {
                        name: '历史雨量', // '实测面雨量',
                        type: 'bar',
                        // barGap: '0', // 柱间距离，默认为柱形宽度的30%，可设固定值
                        barGap: '-100%',

                        // barCategoryGap: '2%',
                        z: numsflg ? '2' : '0',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + 'mm'
                            }
                        },
                        itemStyle: {
                            color: '#3abbfe', // 柱条颜色
                            borderWidth: 0
                            // borderColor: '#3abbfe' // 柱条描边颜色
                        },
                        data: mylData// yymylData,//mylData
                    },
                    {
                        name: '放大雨量', // '流域面雨量',
                        type: 'bar',
                        // barGap: '0',
                        barGap: '-100%',
                        z: numsflg ? '0' : '3',
                        // barCategoryGap: '2%',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + 'mm'
                            }
                        },
                        itemStyle: {
                            color: '#FFA91A', // '#FFFF00' // 柱条颜色
                            borderWidth: 0
                            // borderColor: '#3abbfe' // 柱条描边颜色
                        },
                        data: yymylData
                    }
                ]
            }
        },
        // 极端情景 选择雨型
        getGetRPList() {
            GetRPList().then((res) => {
                if (res.isSuccess && res.data.length > 0) {
                    this.Jxzyx = res.data
                    this.ruleForm.xzyxForm = res.data[0].rpID
                    // this.getGetRainDesign()
                }
            })
        },
        // 雨型选择事件
        xzyxHandelClick(val) {
            this.ruleForm.xzyxForm = val
            if (this.ruleForm.yycategory == 3) {
                this.getGetWswscdPByP()
            } else if (this.ruleForm.yycategory == 1) {
                this.getGetWswcdAreLP()
            }
        },
        jysdHandelClick(val) {
            this.ruleForm.jysdJdqj = val
            this.getGetRainDesign()
        },
        tabJylJypl(val) {
            this.ruleForm.JylJypl = val
            this.getGetWswscdPByP()
        },
        // 降雨频率
        rcintClick(val) {
            this.ruleForm.rcint = val
            this.ruleForm.jyplRain = val
            this.getGetWswscdPByP()
        },
        // 获取大流域频率列表
        getGetRainDesign() {
            GetRainDesign({ Wswscd: this.wswscd, Step: this.ruleForm.jysdJdqj }).then((res) => {
                this.ruleForm.rcint = res.data[0].DRP
                this.ruleForm.jyplRain = res.data[0].DRP
                this.ruleForm.RainDesign = res.data
                console.log('频率', this.ruleForm.RainDesign);

                this.getGetWswscdPByP()
            })
        },
        // 展开收缩图表
        Statistvics_top() {
            const name = document.querySelectorAll('.echartsBox')
            const Statistvics_topActive = document.querySelectorAll('.Statistvics_top')
            this.chartsShow = !this.chartsShow
            if (this.chartsShow) {
                name[0].classList.remove('echartsBoxShow')
                Statistvics_topActive[0].classList.remove('Statistvics_topActive')
            } else {
                name[0].classList.add('echartsBoxShow')
                Statistvics_topActive[0].classList.add('Statistvics_topActive')
            }
            this.echarresize()
        },
        echarresize() {
            const widthSize = document.querySelector('.echartsBox').clientWidth
            const heightSize = document.querySelector('.exchartsList').clientHeight
            let myChart = ''
            if (this.ruleForm.yycategory == 1 || this.ruleForm.yycategory == 3) {
                myChart = this.$echarts.init(document.getElementById('establistEchart'))
            } else {
                myChart = this.$echarts.init(document.getElementById('lishiCharts'))
            }
            var widthResize = {
                width: widthSize,
                height: heightSize
            }
            myChart.resize(widthResize)
        },
        // 输入降雨量
        rainFallBlur(e) {
            this.ruleForm.rainfall = e.target.value
            this.getGetWswscdPByP()
        },
        // 输入降雨量获取数据接口
        getGetWswscdPByP() {
            this.loadingCharts = true
            const params = {
                Wswscd: this.wswscd,
                rpid: this.ruleForm.xzyxForm,
                step: this.ruleForm.jysdJdqj,
                p: this.ruleForm.JylJypl == '1' ? this.ruleForm.rainfall : this.ruleForm.jyplRain,
                dtTime: moment().format('YYYY-MM-DD HH:mm')
            }
            this.$eventBus.$emit('HDDefaultTime', {
                dtBeginHD: this.$moment().format('YYYY-MM-DD HH:mm'),
                dtEndHD: this.$moment().add('hour', this.ruleForm.jysdJdqj).format('YYYY-MM-DD HH:mm')
            })
            GetWswscdPByP(params).then((res) => {
                if (res.isSuccess) {
                    this.getestablistEchart(res.data)
                    this.loadingCharts = false
                }
            })
        },
        // 新增预演方案接口
        submitCreateRehearsal() {
            if (this.ruleForm.name == '') {
                this.$message.error('请输入方案名称')
                return false
            }
            if (this.ruleForm.yycategory == 1) {
                this.longtimeId = this.ruleForm.ybcategory
                this.rainTypeId = this.ruleForm.ybcategory
            } else if (this.ruleForm.yycategory == 2) {
                this.longtimeId = 0
                this.rainTypeId = 0
            } else {
                if (this.JylJypl == 1) {
                    this.rainTypeId = 1
                    this.longtimeId = this.ruleForm.ybcategory
                } else {
                    this.rainTypeId = 2
                    this.longtimeId = this.ruleForm.jysdJdqj
                }
            }
            const params = {
                hiddendanger_info: this.yhlbtableData,
                noodlesModel: this.noodlesModel,
                fileid: this.fileidId,
                calculationState: '0',
                longtime: this.longtimeId,
                Rainpattern: this.ruleForm.xzyxForm,
                RehearsalType: this.ruleForm.yycategory,
                rainType: this.rainTypeId,
                Name: this.ruleForm.name,
                rainP: this.ruleForm.rainfall,
                wswscd: this.wswscd,
                userid: '610000',
                siteID: this.ruleForm.liccNameid, // 场次
                proportion: this.ruleForm.lsccInput,
                POINTSID: this.POINTSID
            }
            // console.log(params)
            // return;
            this.fullscreenLoading = true

            CreateRehearsal(params).then((res) => {
                if (res.isSuccess) {
                    this.fullscreenLoading = false
                    this.$message({
                        message: '创建方案成功！',
                        type: 'success'
                    })
                    this.$emit('fatherFunction', true)
                } else {
                    this.fullscreenLoading = false;
                    this.$message({
                        message: res.message,
                        type: 'error'
                    })
                }
            }).catch(err => {
                this.fullscreenLoading = false
            })
        },
        cancelRehearsal() {
            this.$eventBus.$emit('HDState', {
                action: '取消创建',
                data: null
            })
            this.$emit('fatherFunction', false)
        },
        // 地图显示雨情方法
        showRainMap() {
            this.showRain = !this.showRain
            if (this.showRain) {
                this.$store.dispatch('mapLoadingText', ['请求降雨数据...'])
                var urlApi = '/api/Basin/GetBasinStationRainList'
                const param = {
                    dtBegin: this.sitebegin,
                    dtEnd: this.siteend,
                    wswscd: this.wswscd,
                    limit: '11111',
                    page: '1'
                }
                this.$eventBus.$emit('EB_YY_YJ_LJ', {
                    dtStart: this.sitebegin,
                    dtEnd: this.siteend,
                    wswscd: this.wswscd
                })// 显示预警村庄
                this.$api.Get(urlApi, param).then(res => {
                    this.$store.getters.pageState.yuYanIsCreat_SCJY = true
                    this.$store.dispatch('mapLoadingText', [])
                    if (res.isSuccess) {
                        this.dataList = res.data.data.filter(function (item, index) {
                            return item.stationCount > 0
                        })
                        this.$eventBus.$emit('EB_YB_SCJY', true, res.data, param)
                        // this.creatRealRain(res.data, param)
                    } else {
                        this.$message.error(res.message)
                        this.$eventBus.$emit('EB_YB_SCJY', false)
                    }
                })
            } else {
                this.$eventBus.$emit('EB_YY_YJ_LJ', false)
                this.$eventBus.$emit('EB_YB_SCJY', false)
                this.$store.getters.pageState.yuYanIsCreat_SCJY = false
            }
        },
        closeRian() {
            this.showRain = false
            this.$eventBus.$emit('EB_YB_SCJY', false)
            this.$eventBus.$emit('EB_YY_YJ_LJ', false)
        }
    }
}
</script>
<style lang="less" scoped>
.TimeOfRianTitle {
    background: url('~@/assets/dialog/title8.png') no-repeat;
    background-size: 100% 100%;
    background-position-y: bottom;
    font-size: 14px;
    line-height: 30px;
    height: 40px;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #FFFFFF;
    border-radius: 2px;
    margin-top: 4px;
    margin-bottom: 10px
}

.closeTransIcon {
    transform: rotate(180deg);
}

.echartsBox {
    height: 230px;
    // height: calc(100% - 600px);
    overflow: hidden;

    >.exchartsList {
        //height: calc(100% - 40px);
        height: 230px;
    }
}

.ybechartsBox {
    //height: 265px;
    height: 240px;

    >.exchartsList {
        height: 240px;
    }
}

.echartsBoxShow {
    height: 45px
}

.tableEstablish1 {
    // height: 480px;
    //height: calc(100% - 300px);
    height: 444px;
    height: 415px;
}

.tableEstablish1Center {
    height: 372px;
}

.tableEstablish2 {
    // height: 500px;
    //height: calc(100% - 250px);
    height: 515px;
}

.tableEstablish2Center {
    height: 472px;
}

.tableEstablish3 {
    // height: 450px;
    //height: calc(100% - 360px);
    height: 446px;
}

.tableEstablish3Center {
    height: 403px;
}

.tableEstablishOne {
    // height: 300px
    //height: calc(100% - 540px);
    height: 170px;
}

.tableEstablishOneCenter {
    height: 127px;
}

.tableEstablishTwo {
    //height: calc(100% - 490px);
    //height: 299px;
    height: 280px;
}

.tableEstablishTwoCenter {
    //height: 256px;
    height: 237px;
}

.tableEstablishThree {
    // height: 270px
    //height: calc(100% - 550px);
    height: 211px
}

.tableEstablishThreeCenter {
    height: 168px
}

/deep/ .el-radio-button__inner {
    padding: 10px 20px !important;
}

/deep/ .jylb_form .el-radio-button__inner {
    padding: 10px 46px !important;
}

.el-form-item {
    margin-bottom: 0px;
    overflow: hidden;

    /deep/.el-form-item__label-wrap {
        width: 19%;
        margin-left: 0 !important;
    }

    /deep/ .el-radio-group {
        font-size: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    /deep/.el-form-item__content {
        margin-left: 0px !important;
        float: right;
        width: 81% !important;
        display: flex;
        justify-content: flex-start;

        label {
            width: 22%;
            text-align: center;
            // margin-bottom: 10px;
            margin-top: 5px;
            margin-right: 0;
        }
    }
}

.xzjywj {
    /deep/.el-form-item__label-wrap {
        //width: 32%;
        width: 18%;
    }

    /deep/.el-form-item__content {
        //width: 89% !important;
        margin-left: 0 !important;
    }

    /deep/.el-input-number__decrease i {
        color: #00FFFF;
        font-size: 16px;
        font-weight: bold;
    }

    /deep/.el-input-number__increase i {
        color: #00FFFF;
        font-size: 16px;
        font-weight: bold;
    }
}

.yhRlfoem {
    /deep/.el-form-item__content {
        label {
            //  width:auto
            letter-spacing: -1px;
        }
    }

    .el-radio:first-child {
        width: 25%;
    }

    .el-radio:last-child {
        width: 35%;
    }

    /deep/.el-radio {
        display: inline-block;
        text-align: center;
        margin-right: 0px;
    }

    /deep/.el-radio__label {
        vertical-align: bottom;
    }

    /deep/.el-radio__input {
        height: 0.875rem;
    }

}

.estabform {
    /deep/.el-radio__input {
        height: 14px;
    }
}

.famc {
    margin-bottom: 10px;

    /deep/.el-form-item__content {
        width: 81% !important;
        margin-left: 0 !important;
    }

    /deep/ .el-radio-group {
        justify-content: flex-start !important;

        label {
            margin-right: 2px;
        }
    }

    /deep/ .el-radio-group {
        //font-size: 0;
        width: 100%;
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        margin-right: 4px;
    }

    /deep/ .el-radio {
        display: flex;
        justify-content: start;
    }

}

.btm_faxq {
    text-align: right;
    width: 100%;
    margin-top: 20px;
    position: absolute;
    bottom: 0;
    right: 0;

    .btnCjfa {
        padding: 10px;
        margin: 0 10px;
    }
}

.pop-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    line-height: 16px;

    .hdbtn {
        background: url('~@/assets/map/popHD/btnPlay.png') no-repeat top center;
        background-size: 100% 100%;
        padding: 10px 20px 7px 20px;

        &:hover {
            background: url('~@//assets/map/popHD/btnPlay_active.png') no-repeat top center;
            background-size: 100% 100%;
        }
    }
}

.btm_faxq2 {

    //padding-top: 14px;
    //position: absolute;
    //bottom:4px;
    //text-align: center;
    //width: 85%;
    padding-top: 14px;
    text-align: center;
    width: 100%;
    border-top: 1px solid #3F72AA;

    .btnCjfa {
        margin: 0 5px;

        img {
            width: 35%;
            height: 36px;
        }
    }
}

.Faxq_Statistics {
    margin: 0 0 10px 0;

    .table_Faxq_Statistics {
        border: 2px solid #151e5f;

        >div {
            overflow: hidden;
            padding: 5px 0;
        }

        >div>div {
            width: 20%;
            text-align: center;
            float: left;
        }

        >div:first-child {
            color: #5688d8;
            background: #070539;
            border-bottom: 2px solid #151e5f;
        }

        >div:last-child {
            background: #07044d;

            span {
                display: block;
            }
        }
    }
}

.xzccBtn {
    line-height: 30px;
    padding: 1px 5px;
    display: inline-block;
    margin-left: 10px;
    top: 0;
    letter-spacing: -1px;
}

/deep/.el-input-number__decrease,
/deep/ .el-input-number__increase {
    background: rgba(26, 78, 110, 0.7);
    border-color: #42819F;

    i {
        color: #8799B4
    }
}

.leftLscc {
    /deep/.el-form-item__content {
        justify-content: left;
        width: 270px !important;
    }
}

.tabJYlDiv {
    /deep/ .el-radio-group {
        justify-content: flex-start !important;

        label {
            margin-right: 10px;
        }
    }
}

// 遮罩层
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    // background-color: rgba(11, 49, 85, 0.33);
    background-color: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    z-index: 1;
}

.layerLscc {
    position: absolute;
    //top: 100px;
    //left: -80%;
    top: 258px;
    left: 126px;
    width: 263px;
    height: 223px;
    background: url(../../../assets/newimg/lsccLayer.png) no-repeat top center;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 0 20px;
    z-index: 2;

    .layerLsccName {
        height: 50px;
        line-height: 50px;
        background: url(../../../assets/newimg/lscclayername.png) no-repeat bottom center;
        text-align: center;
        color: #fff;
        font-size: 16px;
        font-weight: 700;

        i {
            float: right;
            font-size: 24px;
            margin-top: 12px;
            color: #75B0FC;
            cursor: pointer;
        }
    }
}

.lsccLayerForm {
    margin: 0px 0;

    .el-form-item {
        margin: 5px 0;

        /deep/.el-form-item__label-wrap {
            width: auto !important;
        }
    }

    /deep/.el-form-item__content {
        width: 140px !important;
    }
}

.btnLsccDiv {
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;

    span {
        margin: 0 20px;
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
    }
}

/deep/.el-select .el-input__inner {
    border: 1px solid #8799b4;
}

/deep/.el-form-item__label {
    padding: 0;

    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    opacity: 0.8;
    text-shadow: 0px 3px 2px rgba(0, 14, 17, 0.19);
}

.marbom5 {
    margin-bottom: 5px;
}

.wudutableTwo {
    //height: calc(100% - 60px);
    height: 200px;
}

.wudutableOne {
    //height: calc(100% - 30px);
    height: 182px;
}

.wudutable1 {
    //height: calc(100% - 30px);
    height: 182px;
}

.wudutable3 {
    //height: calc(100% - 30px);
    height: 182px;
}

.tableHeight {
    height: calc(100% - 77px);
}

.tableHeightOne {
    //height: calc(100% - 66px);
    height: 172px;
}

.tableHeight1 {
    //height: calc(100% - 66px);
    height: 445px;
}

.tableHeightTwo {
    height: 380px;
}

//滚动条高度
.el_scrollbar {
    height: 8vh;
}

.el_scrollbarOpen {
    height: 14vh;
}

.el_scrollbarOpenCenter {
    height: 9vh;
}

.el_scrollbarClose {
    height: 41vh;
}

.el_scrollbarCloseCenter {
    height: 36vh;
}

.el_scrollbar2Open {
    height: 26vh;
}

.el_scrollbar2OpenCenter {
    height: 21vh;
}

.el_scrollbar2Close {
    height: 52vh;
}

.el_scrollbar2CloseCenter {
    height: 47vh;
}

.el_scrollbar3Open {
    height: 19vh;
}

.el_scrollbar3OpenCenter {
    height: 14vh;
}

.el_scrollbar3Close {
    height: 44vh;
}

.el_scrollbar3CloseCenter {
    height: 39vh;
}

//无数据
.noData {
    background-position: center 85%;
    padding-top: 45%;
}

.noDataOpen {
    background-position: center 15%;
    padding-top: 19%;
}

.noDataCenter {
    background-position: center 15%;
    padding-top: 19%;
}

.noDataCenterClose {
    background-position: center 85%;
    padding-top: 50%;
}

.noData2Open {
    background-position: center 72%;
    padding-top: 30%;
}

.noData2Center {
    background-position: center 88%;
    padding-top: 54%;
}

.noData2Close {
    background-position: center 88%;
    padding-top: 54%;
}

.noData2CenterClose {
    background-position: center 88%;
    padding-top: 54%;
}

.noData3Open {
    background-position: center 56%;
    padding-top: 24%;
}

.noData3Center {
    background-position: center 66%;
    padding-top: 28%;
}
</style>
